<template>
	<view>
		<view class="user-bg flex justify-center align-center">
			<view class="flex flex-direction align-center ">
				<!-- #ifdef MP-WEIXIN -->
				<view class="flex flex-direction align-center" v-if="!vuex_user.username">
					<button class="" open-type="getUserInfo" @getuserinfo="wxLogin" withCredentials="true" style="line-height: 1;background: none;">
						<u-avatar
							class="avatar "
							:src="vuex_user.avatar ? vuex_user.avatar : 'https://cdn.jy520.fun/superbed/2020/12/12/5fd43e053ffa7d37b3b71541.png'"
							size="120"
						></u-avatar>
					</button>
					<button
						class="text-bold margin-bottom-xs text-green"
						open-type="getUserInfo"
						@getuserinfo="wxLogin"
						withCredentials="true"
						style="line-height: 1;background: none;font-size: 28rpx;padding-top: 10rpx;"
					>
						{{ vuex_user.username || '点击登录' }}
					</button>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="flex flex-direction align-center" v-if="!vuex_user.username">
					<button class="" @click="appLogin" style="line-height: 1;background: none;">
						<u-avatar
							class="avatar "
							:src="vuex_user.avatar ? vuex_user.avatar : 'https://cdn.jy520.fun/superbed/2020/12/12/5fd43e053ffa7d37b3b71541.png'"
							size="120"
						></u-avatar>
					</button>
					<button class="text-bold margin-bottom-xs text-green" @click="appLogin" style="line-height: 1;background: none;font-size: 28rpx;padding-top: 10rpx;">
						{{ vuex_user.username || '点击登录' }}
					</button>
				</view>
				<!-- #endif -->
				<view class="flex flex-direction align-center" v-else>
					<u-avatar
						class="avatar"
						:src="vuex_user.avatar ? vuex_user.avatar : 'https://cdn.jy520.fun/superbed/2020/12/12/5fd43e053ffa7d37b3b71541.png'"
						size="120"
					></u-avatar>
					<text class="text-bold margin-tb-xs text-green">{{ vuex_user.username }}</text>
				</view>
				<text class="text-grey">{{ vuex_user.remark || '南城起风 风醉怡人' }}</text>
			</view>
			<image src="https://cdn.jy520.fun/superbed/2020/09/17/5f6314f2160a154a67cf0745.gif" mode="scaleToFill" class="gif-wave"></image>
		</view>
		<view class="padding-sm flex text-center text-grey bg-white shadow-warp">
			<view class="flex flex-sub flex-direction solid-right">
				<view class="text-xxl text-orange">{{ count.accessSum || 0 }}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-attention padding-right-xs"></text>
					访问
				</view>
			</view>
			<view class="flex flex-sub flex-direction solid-right">
				<view class="text-xxl text-blue">{{ count.articleSum || 0 }}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-text padding-right-xs"></text>
					文章
				</view>
			</view>
			<view class="flex flex-sub flex-direction">
				<view class="text-xxl text-green">{{ count.tagSum || 0 }}</view>
				<view class="margin-top-sm">
					<text class="cuIcon-tag padding-right-xs"></text>
					标签
				</view>
			</view>
		</view>

		<view class="cu-list menu card-menu margin-tb shadow-lg radius">
			<view class="cu-item arrow" @click="toChat">
				<navigator class=" content"  hover-class="none">
					<text class="cuIcon-group_fill text-olive"></text>
					<text class="text-grey">IM聊天室</text>
				</navigator>
			</view>
			<view class="cu-item arrow">
				<navigator class="content" url="/pages/user/article_file/article_file" hover-class="none">
					<text class="cuIcon-rankfill text-yellow"></text>
					<text class="text-grey">文章归档</text>
				</navigator>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="cu-item arrow" v-if="vuex_user.userType == 0">
				<navigator class="content" url="/pages/user/article_add/article_add" hover-class="none">
					<text class="cuIcon-roundaddfill text-orange"></text>
					<text class="text-grey">文章发布</text>
				</navigator>
			</view>
			<!-- #endif -->

			<view class="cu-item arrow">
				<navigator class=" content" url="/pages/user/version_log/version_log" hover-class="none">
					<text class="cuIcon-formfill text-green"></text>
					<text class="text-grey">版本日志</text>
				</navigator>
			</view>
			<view class="cu-item arrow">
				<view class="content" @click="thanks()" hover-class="none">
					<text class="cuIcon-appreciatefill text-red"></text>
					<text class="text-grey">赞赏支持</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<button class="cu-btn content" open-type="feedback">
					<text class="cuIcon-writefill text-cyan"></text>
					<text class="text-grey">意见反馈</text>
				</button>
			</view>
			<view class="cu-item arrow" v-if="vuex_user.username">
				<view class="content" hover-class="none" @click="exit()">
					<text class="cuIcon-backwardfill text-orange"></text>
					<text class="text-grey">退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			count: {}
		};
	},
	onLoad() {
		this.getCount();
	},
	methods: {
		getCount() {
			this.$u.api.getCount().then(res => {
				this.count = res.data;
			});
		},
		wxLogin(response) {
			if (!response.detail.iv) {
				uni.showToast({
					title: '您取消了授权,登录失败',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			let _this = this;
			uni.showLoading({
				title: '登录中...'
			});
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					//从服务器上获取AppId screat //根据code 去微信服务器获取 openid
					_this.$u.api.getWechatOpenId({ code: loginRes.code }).then(res => {
						if (!res.data) {
							uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录失败' });
							return;
						}
						let userInfo = response.detail.userInfo;
						let authUser = {
							uuid: res.data.openid,
							username: userInfo.nickName,
							nickname: userInfo.nickName,
							avatar: userInfo.avatarUrl,
							source: 'wechat'
						};
						_this.$u.api.wechatLogin(authUser).then(res => {
							let user = res.data.userInfo;
							_this.$u.vuex('vuex_user.userId', user.userId);
							_this.$u.vuex('vuex_user.username', user.userName);
							_this.$u.vuex('vuex_user.avatar', user.avatar);
							_this.$u.vuex('vuex_user.userType', user.userType);
							_this.$u.vuex('vuex_token', res.data.token);
						});
						uni.hideLoading();
						uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录成功' });
					});
				},
				fail: function() {
					uni.hideLoading();
					uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '登录失败' });
				}
			});
		},
		appLogin() {
			this.$u.route('/pages/user/login/login');
		},
		toChat(){
			if(this.vuex_token){
				this.$u.route('/pages/im/chat');
			}else{
				uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '请先登录~~' });
			}
		},
		exit() {
			this.$u.vuex('vuex_user', { username: '' });
			this.$u.vuex('vuex_token', '');
			uni.showToast({ icon: 'none', duration: 2000, position: 'bottom', title: '退出成功' });
		},
		thanks() {
			let imgArr = ['https://cdn.jy520.fun/superbed/2020/12/12/5fd43a253ffa7d37b3b2fd64.png'];
			uni.previewImage({
				urls: imgArr,
				current: imgArr[0]
			});
		}
	}
};
</script>

<style lang="stylus">
page
	background-color #ededed
.user-bg
	width 100%
	height 450rpx
	background-image url('https://cdn.jy520.fun/superbed/2020/09/17/5e780e2e5c560911293eba60.jpg')
	background-position center
	background-repeat no-repeat
	background-size 100% 100%
	position relative
	.gif-wave
		position absolute
		width 100%
		bottom 0
		left 0
		z-index 99
		mix-blend-mode screen
		height 100rpx
.user-box
	background-color #fff
.UCenter-bg
	background-image url('https://image.weilanwl.com/color2.0/index.jpg') // image.weilanwl.com/color2.0/index.jpg);
	background-size cover
	height 550rpx
	display flex
	justify-content center
	padding-top 40rpx
	overflow hidden
	position relative
	flex-direction column
	align-items center
	color #fff
	font-weight 300
	text-shadow 0 0 3px rgba(0, 0, 0, 0.3)
.UCenter-bg text
	opacity 0.8
.UCenter-bg image
	width 200rpx
	height 200rpx
.UCenter-bg .gif-wave
	position absolute
	width 100%
	bottom 0
	left 0
	z-index 99
	mix-blend-mode screen
	height 100rpx
map, .mapBox
	left 0
	z-index 99
	mix-blend-mode screen
	height 100rpx
map, .mapBox
	width 750rpx
	height 300rpx
.oauth-btn
	display inline
	background #fff
	padding-left 0
button::after
	border 0
.cu-list.menu>.cu-item
	min-height 95rpx
</style>
